<template>
  <div class="col" :style="[{'flex': `0 0 ` + Number(span)/24*100 + '%'},{'padding-right': gutter + 'px'}]">
    <slot></slot>
  </div>
</template>

<script>
export default {
    props: {
        span: [String, Number]
    },

    data() {
        return {
            gutter: 0,
        }
    },

    mounted() {
        this.gutter = this.$parent.gutter
    }
};

</script>
<style lang='stylus' scoped>
.col
    box-sizing border-box
    padding-bottom 12px
    overflow hidden
    &:last-child
        padding-right 0px!important
</style>